<template>
  <div class="box">
    <el-descriptions
      class="margin-top"
      title="基本信息"
      :column="2"
      border
      style="margin: 0 70px"
    >
     
      <template slot="extra">
          <el-button type="danger" size="small" @click="correct()" v-show="this.data.examineeIsCorrect"
          >提交批改</el-button
        >
        <el-button type="primary" size="small" @click="goBack()"
          >&lt;&lt;&nbsp;返回</el-button
        >
      </template>
      <el-descriptions-item
        label="姓名"
        label-class-name="my-label"
        content-class-name="my-content"
        >{{ this.data.name }}</el-descriptions-item
      >
      <el-descriptions-item
        label="证件号"
        label-class-name="my-label"
        content-class-name="my-content"
        >{{ this.data.idNumber }}</el-descriptions-item
      >
      <el-descriptions-item
        label="考试状态"
        label-class-name="my-label"
        content-class-name="my-content"
        >{{ this.re.message }}</el-descriptions-item
      >
      <el-descriptions-item
        label="得分"
        label-class-name="my-label"
        content-class-name="my-content"
      >
        {{ this.re.data }}
      </el-descriptions-item>
    </el-descriptions>

    <div class="main">
      <header>试题信息</header>
      <div v-if="this.options.qu1">
        <span>单选题</span>
        <el-card
          class="box-card"
          v-for="(item, index) in data.paperObjects"
          v-if="item.quTypeId == 1"
          :key="item.id"
        >
          <div slot="header" class="clearfix">
            <span>{{ item.papercontent }}</span
            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;答案：<span
              >{{ item.answer }}</span
            >
          </div>
          <div
            v-for="(i, index) in item.answerList"
            :key="index"
            class="text item"
          >
            {{ i.options }}&nbsp;&nbsp;{{ i.optionContent }}
          </div>
        </el-card>
      </div>
      <div v-if="this.options.qu2">
        <span>多选题</span>
        <el-card
          class="box-card"
          v-for="(item, index) in data.paperObjects"
          v-if="item.quTypeId == 2"
          :key="item.id"
        >
          <div slot="header" class="clearfix">
            <span>{{ item.papercontent }}</span
            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;答案：<span
              >{{ item.answer }}</span
            >
          </div>
          <div
            v-for="(i, index) in item.answerList"
            :key="index"
            class="text item"
          >
            {{ i.options }}&nbsp;&nbsp;{{ i.optionContent }}
          </div>
        </el-card>
      </div>
      <div v-if="this.options.qu3">
        <span>判断题</span>
        <el-card
          class="box-card"
          v-for="(item, index) in data.paperObjects"
          v-if="item.quTypeId == 3"
          :key="item.id"
        >
          <div slot="header" class="clearfix">
            <span>{{ item.papercontent }}</span>
          </div>
          <div class="text item">
            答案：<span>{{ item.answer }}</span>
          </div>
        </el-card>
      </div>
      <div v-if="this.options.qu4">
        <span>填空题</span>
        <el-card
          class="box-card"
          v-for="(item, index) in this.question"
          v-if="item.quTypeId == 4"
          :key="item.id"
        >
          <div slot="header" class="clearfix">
            ({{item.score}}分)&nbsp;<span>{{ item.papercontent }}</span> <el-input-number v-model="item.getS" controls-position="right" size="mini" :min=0 :max="item.score"></el-input-number>
          </div>
          <div class="text item">
            答案：<span>{{ item.answer }}</span>
          </div><br>
          <div>
              学生答案：<span>{{item.studentsAnswer}}</span>
          </div>
        </el-card>
      </div>
      <div v-if="this.options.qu5">
        <span>问答题</span>
        <el-card
          class="box-card"
          v-for="(item, index) in this.question"
          v-if="item.quTypeId == 5"
          :key="item.id"
        >
          <div slot="header" class="clearfix">
            ({{item.score}}分)&nbsp;<span>{{ item.papercontent }}</span></span> <el-input-number v-model="item.getS" controls-position="right" size="mini" :min=0 :max="item.score"></el-input-number>
          </div>
          <div class="text item">
            答案：<span>{{ item.answer }}</span>
          </div><br>
          <div>
              学生答案：<span>{{item.studentsAnswer}}</span>
          </div>
        </el-card>
      </div>
      <div v-if="this.options.flag">暂无需要批改的试题</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      eid: "",
      data: {},
      //查看分数和审批状态
      re: {
        message: "",
      },
      menusData: [],
      question: [
        {
          score: "",
        },
      ],

      options: {
        qu1: "",
        qu2: "",
        qu3: "",
        qu4: "",
        qu5: "",
        flag: "true",
      },
    };
  },
  //钩子函数
  created() {
    // console.log(this.$route.params.data);
    this.data = this.$route.params.data;
    this.eid = this.$route.params.eid;
    this.findAll();
    console.log(this.data);
    console.log(this.$route.params.eid);
    // this.selectQuestionTypes();
  },

  methods: {
    //不光是查询，包括将选择题和判断题批改出来
    findAll() {
      //不等于0, 说明还没有修改
      if (this.data.examineeIsCorrect != 0) {
        //需要把填空题和问答题，拿上来
        this.$axios
          .get(
            "/api/correctExamController/findQuestionAndCorrect/" +
              this.eid +
              "/" +
              this.data.id
          )
          .then((res) => {
            this.re.message = "已交卷，未审批";
            if (res.data.code == 200) {
              // this.selectByType();
              this.$message({
                type: "success",
                message: "选择题判断题已修改完成",
              });
            }
            // console.log(res);

            this.question = res.data.data;
            console.log(this.question);
            for (let index = 0; index < this.question.length; index++) {
              const element = this.question[index].quTypeId;
              // if (element == 1) {
              //   this.options.qu1 = true;
              //   this.options.flag = false;
              // }
              // if (element == 2) {
              //   this.options.qu2 = true;
              //   this.options.flag = false;
              // }
              // if (element == 3) {
              //   this.options.qu3 = true;
              //   this.options.flag = false;
              // }
              if (element == 4) {
                this.options.qu4 = true;
                this.options.flag = false;
              }
              if (element == 5) {
                this.options.qu5 = true;
                this.options.flag = false;
              }
            }
          })
          .catch(() => {});
      }
      if (this.data.examineeIsCorrect == 0) {
        //被改完了，或者没有提交
        this.$axios
          .get(
            "/api/correctExamController/findScore/" +
              this.eid +
              "/" +
              this.data.id
          )
          .then((res) => {
            // console.log(res);
            this.re = res.data;
          })
          .catch(() => {});
      }
    },
    correct() {
      //提交批改
        // console.log(this.question);
      //   console.log(this.eid);
      //   console.log(this.data.id);
    //   if (this.question == "") {

    //   }
      this.$axios
        .post(
          "/api/correctExamController/commitCorrect/" +
            this.eid +
            "/" +
            this.data.id,
          this.question
        )
        .then((res) => {
          // console.log(res);

          if (res.data.code == 200) {
            // this.selectByType();
            this.$message({
              type: "success",
              message: "提交批改成功",
            });
          } else {
            this.$message({
              type: "info",
              message: "提交批改失败",
            });
          }
        })
        .catch(() => {});
        this.$router.go(-2);
    },

    //返回前一页
    goBack() {
      this.$router.go(-2);
    },
  },
};
</script>
<style>
.main .el-card {
  margin: 20px 0;
}
.main header {
  color: #303133;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 30px;
}
.main {
  margin: 30px 70px 0;
}
.el-descriptions-item__label.is-bordered-label.my-label {
  width: 150px;
  color: #999;
  text-align: center;
}
.my-content {
  width: 600px;
}
</style>